<!--
 * @Author: your name
 * @Date: 2020-03-02 22:36:30
 * @LastEditTime: 2020-08-03 13:35:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \03PcWeb\src\views\exam\seePage.vue
 -->
<template>
<!--使用window.scrollBy来滚动-->
  <div class="seePage2" id="question-id" ref="el_height" style="position: relative;height: 100%;overflow: auto;">
    <div style="padding-bottom: 50px;" @touchmove="onTouchMove" @touchstart="onTouchStart" @touchend="onTouchEnd" @mousewheel="onMouseWheel">
      <div>
      $\alpha+\beta=\gamma$

$$\alpha+\beta=\gamma$$

$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

      </div>
      <div>$\alpha+\beta=\gamma$</div>
      <div>$$\alpha+\beta=\gamma$$</div>
      <div>$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$</div>
      <div>向下平移{{test1}}个单位长度 </div>
      <div v-html="test1"></div>
      <div v-html="test2"></div>
      <div>=============================</div>
      <div v-html="test4"></div>
      <div>000</div>
      <div>111</div>
      <div>222</div>
      <div>333</div>
      <div>444</div>
      <div>555</div>
      <div>666</div>
      <div>777</div>
      <div>888</div>
      <div>999</div>
      <div>aaa</div>
      <div>bbb</div>
      <div>ccc</div>
      <div>ddd</div>
      <div>eee</div>
      <div>fff</div>
      <div>ggg</div>
      <div>hhh</div>
      <div>iii</div>
      <div>jjj</div>
      <div>kkk</div>
      <div>lll</div>
      <div>mmm</div>
      <div>nnn</div>
      <div>ooo</div>
      <div>ppp</div>
      <div>qqq</div>
      <div>rrr</div>
      <div>sss</div>
      <div>ttt</div>
      <div>uuu</div>
      <div>vvv</div>
      <div>www</div>
      <div>xxx</div>
      <div>yyy</div>
      <div>zzz</div>
    </div>
    <div ref="tailPage" style="position:fixed; bottom:0px;width: 100%; height: 50px; background-color: #f00; z-index: 9999;">
      <span @click="onPrevPage">上一页</span>{{curPage}}/{{totalPage}}<span @click="onNextPage">下一页</span></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      startX:0,
      startY:0,
      moveEndX:0,
      moveEndY:0,
      curPage: 1,
      totalPage: 1,
      pageHeight:0,
      totalHeight:0,
      tailPageHeight:0,
      moveParent: 1,
      timer: null,
      test1: "<math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>3</mml:mn></mml:mrow></mml:mfrac></mml:math></math>",
      test2: "<p style=\"line-height:1.5;\">因为y=1-sin<span style=\"font-family: Times New Roman\"><sup>2</sup></span><span style=\"font-family: Times New Roman\">x-sin x=</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:msup><mml:mrow><mml:mtext>-</mml:mtext><mml:mfenced separators=\"|\"><mml:mrow><mml:mi mathvariant=\"normal\">s</mml:mi><mml:mi mathvariant=\"normal\">i</mml:mi><mml:mi mathvariant=\"normal\">n</mml:mi><mml:mi mathvariant=\"normal\">x</mml:mi><mml:mo>+</mml:mo><mml:mfrac><mml:mrow><mml:mn>1</mml:mn></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:mfrac></mml:mrow></mml:mfenced></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:msup></mml:math></math><span style=\"font-family: Times New Roman\">+</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:mn>5</mml:mn></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac></mml:math></math><span style=\"font-family: Times New Roman\">,且sin x∈[-1,1],</span></p><p style=\"line-height:1.5;\"><span style=\"font-family: Times New Roman\">所以当sin x=-</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:mn>1</mml:mn></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:mfrac></mml:math></math><span style=\"font-family: Times New Roman\">时,y</span><span style=\"font-family: Times New Roman\"><sub>max</sub></span><span style=\"font-family: Times New Roman\">=</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:mn>5</mml:mn></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac></mml:math></math><span style=\"font-family: Times New Roman\">;当sin x=1时,y</span><span style=\"font-family: Times New Roman\"><sub>min</sub></span><span style=\"font-family: Times New Roman\">=-1.</span></p>",
      test3: "<p style=\"line-height:1.5;\">f<math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfenced separators=\"|\"><mml:mrow><mml:mtext>-</mml:mtext><mml:mfrac><mml:mrow><mml:mn>15</mml:mn><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac></mml:mrow></mml:mfenced></mml:math></math><span style=\"font-family: Times New Roman\">=f</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfenced separators=\"|\"><mml:mrow><mml:mtext>-</mml:mtext><mml:mfrac><mml:mrow><mml:mn>15</mml:mn><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac><mml:mo>+</mml:mo><mml:mfrac><mml:mrow><mml:mn>3</mml:mn><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:mfrac><mml:mo>×</mml:mo><mml:mn>3</mml:mn></mml:mrow></mml:mfenced></mml:math></math><span style=\"font-family: Times New Roman\">=f</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfenced separators=\"|\"><mml:mrow><mml:mfrac><mml:mrow><mml:mn>3</mml:mn><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac></mml:mrow></mml:mfenced></mml:math></math><span style=\"font-family: Times New Roman\">=sin</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:mn>3</mml:mn><mml:mi mathvariant=\"normal\">π</mml:mi></mml:mrow><mml:mrow><mml:mn>4</mml:mn></mml:mrow></mml:mfrac></mml:math></math><span style=\"font-family: Times New Roman\">=</span><math><?xml version=\"1.0\" encoding=\"UTF-16\"?><mml:math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\"><mml:mfrac><mml:mrow><mml:msqrt><mml:mn>2</mml:mn></mml:msqrt></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:mfrac></mml:math></math><span style=\"font-family: Times New Roman\">.</span></p>",
      test4: "<math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mtext>minimum at&#xA0;</mtext><mi>f</mi><mo>(</mo><mn>0</mn><mo>,</mo><mo>&#x22EF;</mo><mo>,</mo><mn>0</mn><mo>)</mo><mo>=</mo><mn>0</mn><mo>+</mo><mi>n</mi><mi>o</mi><mi>i</mi><mi>s</mi><mi>e</mi></math>",
    };
  },
  created() {},
  mounted() {
    this.$nextTick(
      () => { 
              this.mathJaxVar.MathQueue("question-id");
    });
    setTimeout(() => {
      this.test2 = this.test3;
      this.$nextTick(
        () => { 
                this.mathJaxVar.MathQueue("question-id");

                console.log(this.$refs.el_height.offsetHeight);
                console.log(document.documentElement.clientHeight);
                console.log(document.body.clientHeight);
                console.log(this.$refs.tailPage.offsetHeight);
                this.tailPageHeight = this.$refs.tailPage.offsetHeight;
                this.pageHeight = document.documentElement.clientHeight - this.tailPageHeight;
                this.totalHeight = document.body.clientHeight;
                if(this.totalHeight > this.pageHeight && this.pageHeight > 0) {
                    this.totalPage = this.totalHeight / (this.pageHeight * this.moveParent);
                    if(this.totalPage - Math.floor(this.totalPage) > 0) {
                      this.totalPage = Math.floor(this.totalPage) + 1;
                    }
                }
                
             });

             
    }, 2000)
    
  },
  methods: {
    onPrevPage() {
      console.log("-----------------555");
      
      //document.querySelector(".seePage2").scrollTop=200;
      //document.documentElement=956
      
      /* this.$nextTick(() => {
        this.$refs.el_height.scrollTo(0,1000);
      }) */
      if(this.curPage > 1) {
        this.curPage--;
        //window.scrollTo(0, (this.curPage - 1) * this.pageHeight * this.moveParent);
        window.scrollBy(0, -this.pageHeight * this.moveParent)
      }
    },
    onNextPage() {
      console.log("-----------------666");
      if(this.curPage < this.totalPage) {
        //window.scrollTo(0, this.curPage * this.pageHeight * this.moveParent);
        window.scrollBy(0, this.pageHeight * this.moveParent)
        this.curPage++;
      }
    },
    onTouchStart(e) {
        console.log("----------------aaa");
        console.log(e);
        this.startX = e.touches[0].pageX;
        this.startY = e.touches[0].pageY;
        console.log("-----------------bbb");
    },
    onTouchEnd(e) {
        console.log("----------------ccc");
        console.log(e);
        let X = this.moveEndX - this.startX;

        let Y = this.moveEndY - this.startY;

        

        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
            console.log("向右");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
            console.log("向左");
        }

        else if ( Math.abs(Y) > Math.abs(X) && Y > (this.pageHeight * 0.1)) {
            console.log("向下");
            this.onPrevPage();
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < -(this.pageHeight * 0.1) ) {
            console.log("向上");
            this.onNextPage();
        }
        else{
            console.log("没滑动");
        }
        console.log("-----------------ddd");
    },
    onTouchMove(e) {
      e.preventDefault();
      this.moveEndX = e.changedTouches[0].pageX;
      this.moveEndY = e.changedTouches[0].pageY;
      if(this.timer) {
        clearTimeout(this.timer);
      } else {
        console.log("----------------111");
        console.log(e);
        console.log("-----------------222");
      }
      this.timer = setTimeout(() => {
           this.timer = null;
         },500);

    },
    onMouseWheel(e) {
      e.preventDefault();
      if(this.timer) {
        clearTimeout(this.timer);
      } else {
        console.log("----------------333");
        console.log(e);
        if(e.deltaY < 0) {
          console.log("鼠标向前滚动");
          this.onPrevPage();
        } else if (e.deltaY > 0) {
          console.log("鼠标像后滚动");
          this.onNextPage()
        }
        console.log("-----------------444");
      }
      this.timer = setTimeout(() => {
           this.timer = null;
         },500);
    }
  }
};
</script>
<style lang="scss" scoped>
 
</style>
